import React,{useState,useEffect} from 'react'
import Appson from './Appson'
import Appfn from './Appfn'
import axios from 'axios'
// jsx语法就是html和js的混写，遇到<>解析html，遇到{}解析js
function App() {
  let [renderArr , setRenderArr] = useState([])
  // 声明了一个叫flag的变量，变量的初始值是true，修改这个变量的方法是setFlag
  // vue请求数据在mounted created里
  useEffect(()=>{
    console.log(document.getElementById("mybtn"))
    console.log("render");
    axios.get("/api/list").then(res=>{
        setRenderArr(res.data)
    })
  },[]) // 当依赖项为一个空数组的时候，表示组件挂载完毕的生命周期，相当于vue的mounted
  let [flag,setFlag] = useState(true)
  let [name,setName] = useState("zhaozhihao")
  let [arr,setArr] = useState([
      {
          name:"zhansgan",
          age:"2"
      },
      {
        name:"zhansgan111",
        age:"22222"
    },
    {
        name:"zhansgandasd111",
        age:"22222dad"
    },

  ])
  let fn = ()=>{
    setFlag(!flag)
  }
  let sonsendfa = (data)=>{
        console.log(data);
        setArr(data)
  }
  return (
    <>
       {
           renderArr && renderArr.length ? renderArr.map((item,index)=>{
                return <div key={index}>{item.name}</div>
           }):""
       }
        <div>{flag?"flag真":"flag假"}</div>
        <button onClick={fn} id="mybtn">点击</button>
        {/* 组件标签单标签双标签都可以 */}
        <Appson send="我是父组件的数据"></Appson>
        <Appfn send ={name} send1="sne1" arr={arr} sonsendfa={sonsendfa}></Appfn>
    </>
  
   
  )
}

export default App